<template>
  <div class="page">
    <transition name="fade">
      <div v-show="!loggedIn" class="login-container">
        <h2>欢迎登录</h2>
        <input v-model="username" type="text" placeholder="账号" />
        <input v-model="password" type="password" placeholder="密码" />
        <button @click="handleLogin">登录</button>
      </div>
    </transition>

    <transition name="fade">
      <div v-show="loggedIn" class="main-content">
        <h1>后台管理系统</h1>
        <el-button type="primary" @click="showDialog = true">新增用户</el-button>
        <el-table :data="tableData" style="margin-top: 20px" border>
          <el-table-column prop="id" label="ID" width="100" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button type="primary" @click="editUser(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deleteUser(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 新增/编辑对话框 -->
        <el-dialog v-model="showDialog" :title="form.id ? '编辑用户' : '新增用户'">
          <el-form :model="form" label-width="60px">
            <el-form-item label="姓名">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="showDialog = false">取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </template>
        </el-dialog>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 登录部分
const username = ref('')
const password = ref('')
const loggedIn = ref(false)

const handleLogin = () => {
  if (!username.value || !password.value) {
    ElMessage.warning('请输入账号和密码')
    return
  }
  loggedIn.value = true
}

// 表格数据
const tableData = ref([
  { id: 1, name: '张三', email: 'zhang@example.com' },
  { id: 2, name: '李四', email: 'li@example.com' }
])

const showDialog = ref(false)
const form = reactive({ id: 0, name: '', email: '' })

const resetForm = () => {
  form.id = 0
  form.name = ''
  form.email = ''
}

const submitForm = () => {
  if (form.id) {
    // 修改
    const index = tableData.value.findIndex(item => item.id === form.id)
    if (index !== -1) {
      tableData.value[index] = { ...form }
    }
  } else {
    // 新增
    const newId = tableData.value.length
      ? Math.max(...tableData.value.map(i => i.id)) + 1
      : 1
    tableData.value.push({ id: newId, name: form.name, email: form.email })
  }

  resetForm()
  showDialog.value = false
  ElMessage.success('提交成功')
}

const editUser = (row: any) => {
  form.id = row.id
  form.name = row.name
  form.email = row.email
  showDialog.value = true
}

const deleteUser = (row: any) => {
  ElMessageBox.confirm('确定要删除该用户吗？', '提示', {
    type: 'warning'
  }).then(() => {
    tableData.value = tableData.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  })
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  flex-direction: column;
  padding: 40px;

  .login-container {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);

    input {
      display: block;
      width: 250px;
      padding: 10px;
      margin: 10px 0;
      border-radius: 6px;
    }

    button {
      padding: 10px 20px;
      margin-top: 10px;
    }
  }

  .main-content {
    width: 800px;
    background: #fff;
    color: #333;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
}
</style>
